<template>
  <component
    :is="whichPopupType"
    position="bottom"
    closeable
    v-model:show="show"
    v-model:visible="show"
    v-model:title="dialogConfig.title"
    :width="dialogConfig.width"
    :headerFixed="dialogConfig.headerFixed"
    :auto-height="true"
  >
    <div class="nomoney-tips">
      <h3><img :src="images.waring" alt=""> {{ t('home.test021') }}</h3>
      <el-button type="primary" @click="openWallet">{{ t('Transaction.Recharge') }}</el-button>
    </div>
  </component>
</template>

<script setup lang="ts" name="CurrencyExchange">
import userinfo from '@/store/userinfo';
import system from '@/store/system';
import gamesApi from '@/api/modules/games';
import nocache from '@/store/nocache';

const piniaUserinfo:any = userinfo();
const piniaNocache:any = nocache();
const piniaSystem:any = system();
const emits = defineEmits(['update:visible', 'button-click']);
const router = useRouter();
const { t } = useI18n();

const whichPopupType = computed(()=>{
  return piniaSystem.getIsH5 ?
    markRaw(defineAsyncComponent(() => import('vant/es/popup'))) :
    markRaw(defineAsyncComponent(() => import('@/components/Dialog/index.vue')));
});

const images: any = reactive({
  waring: new URL('../../assets/waring.svg', import.meta.url).href
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const data:any = reactive({
  dialogConfig: {
    show: true,
    title: computed(()=> t("home.test020")),
    width: 350,
    headerFixed: false,
  },
  show: props.visible,
});

const {
  dialogConfig,
  show
} = toRefs(data);


watch(
  () => props.visible,
  (val, preVal) => {
    show.value = val;
  },
  { immediate: false, deep: true },
);

watch(
  () => show.value,
  (val, preVal) => {
    console.log(whichPopupType)
    if(!val){
      emits('update:visible', val);
    }
  },
  { immediate: false, deep: true },
);


// 打开钱夹
const openWallet = () => {
  show.value = false;
  emits('button-click');
  if(piniaSystem.getIsH5){
    router.replace({
      name: 'WalletH5'
    })
  }else{
    piniaNocache.openWallet();
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');

.z-dialog-content{
  .nomoney-tips{
    padding-top: var(--rem-30);
  }
}
</style>
